<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>商品价格计算工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            line-height: 1.6;
            padding: 0;
            margin: 0;
            min-height: 100vh;
        }
        
        .container {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 0;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 15px;
            text-align: center;
            position: relative;
        }
        
        h1 {
            margin-bottom: 5px;
            font-size: 1.5rem;
        }
        
        .subtitle {
            font-size: 0.85rem;
            opacity: 0.9;
        }
        
        .tabs {
            display: flex;
            background: #f0f5ff;
            border-bottom: 1px solid #ddd;
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .tab.active {
            background: white;
            border-bottom: 3px solid #6a11cb;
            color: #6a11cb;
        }
        
        .content {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .tab-content {
            display: none;
            flex: 1;
            overflow: hidden;
            flex-direction: column;
        }
        
        .tab-content.active {
            display: flex;
        }
        
        .search-container {
            padding: 12px 15px;
            background: white;
            border-bottom: 1px solid #eee;
        }
        
        .search-box {
            display: flex;
            align-items: center;
            background: #f5f7fa;
            border-radius: 20px;
            padding: 8px 15px;
        }
        
        .search-box i {
            color: #6a11cb;
            margin-right: 10px;
        }
        
        .search-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 16px;
            outline: none;
        }
        
        .section {
            padding: 15px;
        }
        
        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #6a11cb;
            color: #444;
        }
        
        .section-title h2 {
            font-size: 1.2rem;
        }
        
        .product-list {
            overflow-y: auto;
            flex: 1;
        }
        
        .product-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            margin-bottom: 10px;
            background: #f9f9f9;
            border-radius: 10px;
            transition: all 0.3s ease;
            border: 1px solid #eee;
        }
        
        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        
        .product-name {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .product-price {
            color: #6a11cb;
            font-weight: bold;
        }
        
        .quantity-control {
            display: flex;
            align-items: center;
        }
        
        .quantity-btn {
            width: 40px;
            height: 40px;
            background: #6a11cb;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        
        .quantity-input {
            width: 50px;
            height: 40px;
            text-align: center;
            margin: 0 8px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .cart-items {
            overflow-y: auto;
            flex: 1;
        }
        
        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            margin-bottom: 10px;
            background: #f9f9f9;
            border-radius: 10px;
            border: 1px solid #eee;
        }
        
        .cart-item-info {
            flex: 1;
        }
        
        .cart-item-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .cart-item-details {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 14px;
        }
        
        .cart-item-total {
            font-weight: bold;
            color: #6a11cb;
            min-width: 80px;
            text-align: right;
        }
        
        .summary {
            padding: 15px;
            background: #f5f7fa;
            border-top: 2px dashed #ddd;
        }
        
        .total-price {
            font-size: 1.5rem;
            font-weight: bold;
            color: #6a11cb;
            text-align: center;
            margin: 15px 0;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            flex: 1;
            background: #6a11cb;
            color: white;
            border: none;
            padding: 15px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        
        .clear-btn {
            background: #ff4757;
        }
        
        .empty-cart {
            text-align: center;
            color: #888;
            padding: 30px 0;
        }
        
        .save-indicator {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1000;
        }
        
        .no-products {
            text-align: center;
            color: #888;
            padding: 30px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>商品价格计算工具</h1>
            <p class="subtitle">移动端专用 - 轻松选择商品，自动计算总价</p>
        </header>
        
        <div class="tabs">
            <div class="tab active" data-tab="products">商品列表</div>
            <div class="tab" data-tab="cart">购物车</div>
        </div>
        
        <div class="content">
            <div class="tab-content active" id="products-tab">
                <div class="search-container">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" class="search-input" id="search-input" placeholder="搜索商品名称...">
                    </div>
                </div>
                <div class="section">
                    <div class="section-title">
                        <h2>商品列表</h2>
                        <span>点击加减选择</span>
                    </div>
                    <div class="product-list" id="products-container">
                        <!-- 商品将通过JavaScript动态添加 -->
                    </div>
                </div>
            </div>
            
            <div class="tab-content" id="cart-tab">
                <div class="section">
                    <div class="section-title">
                        <h2>购物车</h2>
                        <span id="cart-count">0 件商品</span>
                    </div>
                    <div class="cart-items" id="cart-container">
                        <div class="empty-cart">请从商品列表添加商品</div>
                    </div>
                </div>
                
                <div class="summary">
                    <div class="total-price">总计: ¥<span id="total-amount">0.00</span></div>
                    <div class="action-buttons">
                        <button class="action-btn clear-btn" id="clear-cart">
                            <i class="fas fa-trash"></i> 清空购物车
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="save-indicator" id="save-indicator">已保存</div>

    <script>
        // 示例商品数据
        const defaultProducts = [
            {id: 1, name: "[KPOS]智享版门店收银点位(年费)", price: 1350.00},
            {id: 2, name: "[KPOS]智享版单店-副收银(年费)", price: 500.00},
            {id: 3, name: "[KPOS]智享版连锁管理系统-门店(年费)", price: 190.00},
            {id: 4, name: "[KPOS]商家小程序点餐", price: 800.00},
            {id: 5, name: "[KPOS]平台小程序", price: 400.00},
            {id: 6, name: "[KPOS]会员储值基础版", price: 400.00},
            {id: 7, name: "[KPOS]私域营销高级版", price: 700.00},
            {id: 8, name: "[KPOS]私域营销旗舰版（[KPOS]商家小程序点餐+[KPOS]私域营销高级版）", price: 1400.00},
            {id: 9, name: "POS 4L", price: 1350.00},
            {id: 10, name: "POS 5", price: 1599.00},
            {id: 11, name: "POS Mini4 Pro", price: 2050.00},
            {id: 12, name: "POS 5 Pro", price: 2300.00},
            {id: 13, name: "POS 3DW", price: 2550.00},
            {id: 14, name: "POS 5 Pro Max", price: 2700.00},
            {id: 15, name: "[增值]票通版-电子发票", price: 700.00},
            {id: 16, name: "[KPOS]外卖自动接单(美团&饿了么&京东)", price: 280.00},
            {id: 17, name: "扫码盒KRY-SC12", price: 168.00},
            {id: 18, name: "80热敏票据打印机", price: 300.00},
            {id: 19, name: "[ONPOS]进销存标准版", price: 550.00},
            {id: 20, name: "[增值]金财版-数电发票(电子发票)", price: 700.00},
            {id: 21, name: "[KPOS]智享版进销存标准版", price: 600.00},
            {id: 22, name: "[新零售]门店收银点位(年费)", price: 3399.00},
            {id: 23, name: "[新零售]进销存(不含交付)", price: 899.00},
            {id: 24, name: "[新零售]外卖自动接单(美团闪购、饿百零售)", price: 349.00},
            {id: 25, name: "[新零售]商家小程序-基础版品牌端", price: 2000.00},
            {id: 26, name: "[新零售]商家小程序-基础版门店端", price: 1600.00},
            {id: 27, name: "[新零售]商家小程序-旗舰版品牌端", price: 3400.00},
            {id: 28, name: "[新零售]商家小程序-旗舰版门店端", price: 1650.00},
            {id: 29, name: "[KPOS]平板点餐-旗舰版(门店年费)-智享版专用", price: 650.00},
            {id: 30, name: "[KPOS]平板点餐-标准版(门店年费)-智享版专用", price: 500.00},
            {id: 31, name: "[KPOS]KDS2.0软件(门店年费)-智享版专用", price: 600.00},
            {id: 32, name: "[KPOS]云商钱包", price: 500.00},
            {id: 33, name: "实体 芯片会员卡-五百张", price: 1200.00},
            {id: 34, name: "[美味不用等]手持排队软硬一体机(NB60PRO)-ONPOS", price: 1200.00}
        ];

        // 从本地存储加载数据或使用默认数据
        let products = JSON.parse(localStorage.getItem('products')) || defaultProducts;
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        let filteredProducts = [...products];

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            renderProducts();
            updateCart();
            setupEventListeners();
        });

        // 设置事件监听器
        function setupEventListeners() {
            // 选项卡切换
            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
                    
                    this.classList.add('active');
                    document.getElementById(`${this.dataset.tab}-tab`).classList.add('active');
                });
            });
            
            // 清空购物车按钮
            document.getElementById('clear-cart').addEventListener('click', clearCart);
            
            // 搜索功能
            document.getElementById('search-input').addEventListener('input', function() {
                filterProducts(this.value.trim());
            });
        }

        // 过滤商品
        function filterProducts(searchText) {
            if (searchText === '') {
                filteredProducts = [...products];
            } else {
                filteredProducts = products.filter(product => 
                    product.name.toLowerCase().includes(searchText.toLowerCase())
                );
            }
            renderProducts();
        }

        // 渲染商品列表
        function renderProducts() {
            const container = document.getElementById('products-container');
            container.innerHTML = '';
            
            if (filteredProducts.length === 0) {
                container.innerHTML = '<div class="no-products">没有找到匹配的商品</div>';
                return;
            }
            
            filteredProducts.forEach(product => {
                const cartItem = cart.find(item => item.id === product.id);
                const quantity = cartItem ? cartItem.quantity : 0;
                
                const productElement = document.createElement('div');
                productElement.className = 'product-item';
                productElement.innerHTML = `
                    <div class="product-info">
                        <span class="product-name">${product.name}</span>
                        <span class="product-price">¥${product.price.toFixed(2)}</span>
                    </div>
                    <div class="quantity-control">
                        <button class="quantity-btn" data-action="decrease" data-id="${product.id}">-</button>
                        <input type="number" class="quantity-input" id="qty-${product.id}" value="${quantity}" min="0">
                        <button class="quantity-btn" data-action="increase" data-id="${product.id}">+</button>
                    </div>
                `;
                container.appendChild(productElement);
            });
            
            // 添加按钮事件监听
            document.querySelectorAll('.quantity-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const productId = parseInt(this.dataset.id);
                    const action = this.dataset.action;
                    
                    if (action === 'increase') {
                        changeQuantity(productId, 1);
                    } else if (action === 'decrease') {
                        changeQuantity(productId, -1);
                    }
                });
            });
            
            // 添加输入框事件监听
            document.querySelectorAll('.quantity-input').forEach(input => {
                input.addEventListener('change', function() {
                    const id = this.id.replace('qty-', '');
                    updateProductQuantity(parseInt(id));
                });
                
                // 防止键盘弹出时页面布局错乱
                input.addEventListener('focus', function() {
                    setTimeout(() => {
                        this.blur();
                    }, 100);
                });
            });
        }

        // 改变商品数量
        function changeQuantity(productId, delta) {
            const input = document.getElementById(`qty-${productId}`);
            let newValue = parseInt(input.value) + delta;
            if (newValue < 0) newValue = 0;
            input.value = newValue;
            
            updateProductQuantity(productId);
        }

        // 更新商品数量
        function updateProductQuantity(productId) {
            const input = document.getElementById(`qty-${productId}`);
            const quantity = parseInt(input.value) || 0;
            
            // 查找购物车中是否已有该商品
            const existingIndex = cart.findIndex(item => item.id === productId);
            
            if (quantity === 0) {
                // 如果数量为0，从购物车中移除
                if (existingIndex !== -1) {
                    cart.splice(existingIndex, 1);
                }
            } else {
                const product = products.find(p => p.id === productId);
                if (existingIndex !== -1) {
                    // 更新已有商品的数量
                    cart[existingIndex].quantity = quantity;
                } else {
                    // 添加新商品到购物车
                    cart.push({
                        id: product.id,
                        name: product.name,
                        price: product.price,
                        quantity: quantity
                    });
                }
            }
            
            updateCart();
            saveData();
        }

        // 更新购物车显示
        function updateCart() {
            const container = document.getElementById('cart-container');
            const totalElement = document.getElementById('total-amount');
            const countElement = document.getElementById('cart-count');
            
            if (cart.length === 0) {
                container.innerHTML = '<div class="empty-cart">请从商品列表添加商品</div>';
                totalElement.textContent = '0.00';
                countElement.textContent = '0 件商品';
                return;
            }
            
            let total = 0;
            let totalCount = 0;
            container.innerHTML = '';
            
            cart.forEach(item => {
                const itemTotal = item.price * item.quantity;
                total += itemTotal;
                totalCount += item.quantity;
                
                const cartItem = document.createElement('div');
                cartItem.className = 'cart-item';
                cartItem.innerHTML = `
                    <div class="cart-item-info">
                        <div class="cart-item-name">${item.name}</div>
                        <div class="cart-item-details">
                            <span>¥${item.price.toFixed(2)} × ${item.quantity}</span>
                            <span>小计: ¥${itemTotal.toFixed(2)}</span>
                        </div>
                    </div>
                `;
                container.appendChild(cartItem);
            });
            
            totalElement.textContent = total.toFixed(2);
            countElement.textContent = `${totalCount} 件商品`;
        }

        // 清空购物车
        function clearCart() {
            if (cart.length === 0) return;
            
            if (confirm('确定要清空购物车吗？')) {
                cart = [];
                // 重置所有数量输入框
                products.forEach(product => {
                    const input = document.getElementById(`qty-${product.id}`);
                    if (input) input.value = 0;
                });
                updateCart();
                saveData();
            }
        }

        // 保存数据到本地存储
        function saveData() {
            localStorage.setItem('cart', JSON.stringify(cart));
            localStorage.setItem('products', JSON.stringify(products));
            
            // 显示保存提示
            const indicator = document.getElementById('save-indicator');
            indicator.style.opacity = '1';
            
            setTimeout(() => {
                indicator.style.opacity = '0';
            }, 2000);
        }
    </script>
</body>
</html>